<template>
	<view class="content" v-if="info.order_sn">
		<view>
			
			<view class="cu-form-group">
				<view class="title light">商家姓名</view>
				<view class="picker">{{ info.data.provider_name }}</view>
			</view>
			
			<view class="cu-form-group">
				<view class="title light">手机号</view>
				<view class="picker">
					{{ info.data.provider_phone }}
				 
				</view>
			</view>
			
			
			<view class="cu-form-group">
				<view class="title light">评分</view>
				<view class="picker">
					<uni-rate max="5" value="0" @change="changeRate"></uni-rate>
				</view>
			</view>
			
			
			 
			<view class="cu-form-group"><textarea maxlength="-1" @input="inputChange" data-name="remark" placeholder="评价内容"></textarea></view>


			<view class="cu-bar bg-white margin-top">
				<view class="action">图片上传</view>
				<view class="action">{{ imgList.length }}/4</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item, index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
						<image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index"><text class="cuIcon-close"></text></view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length < 4"><text class="cuIcon-cameraadd"></text></view>
				</view>
			</view>
			 
			<!-- <view style=" padding: 20upx;">小提示：修改前请先联系需求方确认价格，以免造成不必要的纠纷</view> -->
			<view class="box margin-top-20" style=" padding: 20upx;">
				<button @click="postForm" class="cu-btn block bg-blue margin-tb-sm lg">
					<text :class="loadding == 1 ? 'cuIcon-loading2 cuIconfont-spin' : 'cuIconfont-spin'"></text>
					确认提交
				</button>
			</view>
		</view>
	</view>
</template>
<style>
.cu-form-group .title {
	max-width: 160upx;
	min-width: 160upx;
}
</style>
<script>
import beeApp from '../../beeApp.js';
import uniRate from "@/components/uni-rate/uni-rate.vue"
export default {
	components: {uniRate},
	data() {
		return {
			modalName: null,
			loadding: 0,
			name: '',
			phone: '',
			address: '',
			content: '',
			order_amount: '',
			remark: '',
			info:{},
			imgList:[],
			pics:[],
			score:0,
		};
	},
	onLoad(option) {
		 
		this.order_sn = option.order_sn;
		    this.getinfo();
	},
	onShow: function() {},

	methods: {
			getinfo: function() {
			var that = this;
			beeApp.api(
				'apiv2/order/find',
				{
					order_sn: this.order_sn
				},
				function(res) {
					if (res.code != 200) {
						beeApp.alert(res.msg);
						return;
					}
					if (res.data.data) {
						res.data.data = JSON.parse(res.data.data);
					}
					that.info = res.data;
				}
			);
		},
		inputChange(e) {
			// console.log(e);
			var name = e.currentTarget.dataset.name;
			this[name] = e.detail.value;
		},
		changeRate:function(e){
			console.log("changeRate",e);
			this.score = e.value;
			
		},
		ChooseImage() {
			uni.chooseImage({
				count: 4, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				// sourceType: ['album'], //从相册选择
				success: res => {
					for (let i in res.tempFilePaths) {
						beeApp.upload(res.tempFilePaths[i], uploadRes => {
							this.imgList.push(res.tempFilePaths[i]);
							this.pics.push('https://img.bestsmartbee.com/' + uploadRes.key);
						});
					}
				}
			});
		},
		ViewImage(e) {
			uni.previewImage({
				urls: this.imgList,
				current: e.currentTarget.dataset.url
			});
		},
		DelImg(e) {
			uni.showModal({
				title: '提示',
				content: '确定要删除这张图片吗？',
				cancelText: '再看看',
				confirmText: '再见',
				success: res => {
					if (res.confirm) {
						var index = e.currentTarget.dataset.index;
						this.imgList.splice(index, 1);
						this.pics.splice(index, 1);
					}
				}
			});
		},

		postForm: function() {
			var that = this;
			if (that.loadding == 1) {
				return;
			}
			if(this.score==0){
				beeApp.alert('请输入先评分');
				return;
			}
			if (this.remark == '') {
				beeApp.alert('请输入评价内容');
				return;
			}
			that.loadding = 1;
			beeApp.api(
				'apiv2/dao_jia/comment',
				{
					content: this.remark,
					order_sn: this.order_sn,
					score:Number(this.score)*20,
					pics:this.pics,
					method: 'POST'
				},
				function(res) {
					that.loadding = 0;
					if (res.code != 200) {
						beeApp.alert(res.msg);
						return;
					}
					beeApp.setPageData('pages/order/detail', { reload: 1 });
					beeApp.alert('恭喜您,评价成功！', function() {
						uni.navigateBack();
					});
				}
			);
		}
	}
};
</script>
